<template>
  <div class="container">

    <Category title="游戏">


      <!--
         父结构的外侧 必须要包裹  template 标签
         -->
      <!--      <template scope="atguigu">
      -->
      <template slot-scope="atguigu">
        返还的数据对象： {{ atguigu }}
        <!--        atguigu 插槽返还的数据对象-->
        <ul>
          <li v-for="(g,index) in atguigu.games" :key="index">{{ g }}</li>
        </ul>
      </template>
    </Category>

    <Category title="游戏">
      <template slot-scope="{games}">
        直接绑定返还的数据对象的 某个属性： {{ games }}
        <ol>
          <li style="color:red" v-for="(g,index) in games" :key="index">{{ g }}</li>
        </ol>
      </template>
    </Category>
    <!--
    “:” 是指令 “v-bind”的缩写，“@”是指令“v-on”的缩写；“.”是修饰符。
      v-bind 指令可以用于响应式地更新 HTML 特性
      v-on 指令，它用于监听 DOM 事件
    -->
    <Category title="游戏">
      <template slot-scope="{games}">
        <h4 v-for="(g,index) in games" :key="index">{{ g }}</h4>
      </template>
    </Category>

  </div>
</template>

<script>
import Category from './components/Category'

export default {
  name: 'ScopeSlot',
  components: {Category},
}
</script>

<style scoped>
.container, .foot {
  display: flex;
  justify-content: space-around;
}

h4 {
  text-align: center;
}
</style>
